<template>
  <div class="login-container">
    <!--------------------- 登录 --------------------------->
    <van-nav-bar title="登录" >
      <template #left>
        <van-icon name="cross" size="18" />
      </template>
    </van-nav-bar>
    <!----------------------------- input输入框 ---------------------------->
    <van-form @submit="onSubmit" ref="loginForm">
      <van-field
        v-model="userInfo.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="loginRule.mobile"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="iconfont icon-shouji"></i>
      </van-field>
      <van-field
        v-model="userInfo.code"
        name="value"
        placeholder="请输入验证码"
        :rules="loginRule.code"
        type="number"
        maxlength="11"
      >
        <i slot="left-icon" class="iconfont icon-icon-test14"></i>
        <template #button>
          <!-------------------- 倒计时 ------------------------>
          <van-count-down
            :time="time"
            format=" ss s"
            v-if="isCountDownShow"
            @finish="isCountDownShow=false"
          />
          <van-button
            v-else
            class="send-sms-btn"
            round
            size="small"
            type="default"
            @click.prevent="sendCode()"
          >获取验证码</van-button>
        </template>
      </van-field>
      <div class="btn">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>
           
<script>
import { login_api, codes_api } from "@/api/login/index";
export default {
  data() {
    return {
      userInfo: {
        mobile: "13911111155",
        code: "246810"
      },
      //发送验证码倒计时------------------
      time: 5000,
      //是否显示倒计时------------------
      isCountDownShow: false,
      loginRule: {
        mobile: [
          { required: true, message: "手机号不能为空" },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "请填写合法的手机号"
          }
        ],
        code: [
          { required: true, message: "验证码不能为空" },
          { pattern: /^\d{6}$/, message: "请输入6位有效数字" }
        ]
      }
    };
  },
  ceated() {
  
  },
  methods: {
    //表单校验，发送请求--------------
    async onSubmit() {
      //登录加载提示------------------
      this.$toast.loading({
        message: "登录中...",
        forbidClick: true,
        duration: 0 //加载持续时间，设置0  如果登录不成功就一直显示
      });
      //新写法---------------
      try {
        const { data: res } = await login_api(this.userInfo);
        // console.log(res, 1111);
        // res.data.data => { token: 'xxx', refresh_token: 'xxx' }
        this.$toast.success("登录成功");
        //存储token到本地
        this.$store.commit('SET_TOKEN',res.data)
        this.$router.push("/users");
      } catch (err) {
        if (err.response.status == 403) {
          this.$toast.fail("请先获取验证码");
        } else if (err.response.status == 400) {
          this.$toast.fail("手机号或验证码错误");
        } else {
          this.$toast.fail("登录失败，请稍后重试");
        }
      }
      /* 原始写法------------------------------
      *  const {data:res} =await login_api(this.userInfo).catch(err=> {
        console.log(err);
      })
      console.log(res,222); */
    },
    
    //发送验证码-------要先校验手机号是否正确------显示倒计时--------------------------
    async sendCode() {
      try {
        //校验手机号--------------()里面是绑定的name属性值，验证单个表单的
        await this.$refs.loginForm.validate("mobile");
      } catch (err) {
        return this.$toast.fail("发送失败");
      }
      //表单验证通过，显示倒计时
      this.isCountDownShow = true;
      //请求发送验证码------------------------
      try {
        const { data: res } = await codes_api(this.userInfo.mobile);
        // console.log(res, 666);
        this.$toast("发送成功");
      } catch (err) {
        // console.log(err.response,5555);
         //发送失败，关闭倒计时-----------------
        this.isCountDownShow = false;
        if (err.response.status == 429) {
          this.$toast("发送太频繁了，请稍后重试");
        } else {
          this.$toast("发送失败，请稍后重试");
        }
      }
    }
  }
};
</script>
<style scoped lang="less">
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  .van-nav-bar {
    background-color: #3296fa;
    /deep/.van-nav-bar__title {
      color: #fff;
    }
    /deep/.van-icon {
      color: #fff;
    }
  }
  /deep/.iconfont {
    font-size: 40px;
    margin-right: 20px;
  }

  .send-sms-btn {
    background-color: #ededed;
  }
  .btn {
    display: flex;
    padding: 0 28px;
    margin-top: 52px;
    .van-button {
      flex: 1;
      color: #fff;
      background-color: #3296fa;
      border-radius: 10px;
    }
  }
  .van-cell.van-field {
    height: 100px;
    /deep/.van-field__body {
      height: 50px;
    }
  }
}
</style>